DashBuilder 시작 가이드
대시보드 생성하기
DashBuilder를 사용하여 대시보드를 생성하는 방법과 주요 구성 요소에 대해 설명합니다.
1. HTML 컨테이너 준비
먼저 대시보드가 표시될 HTML 컨테이너 요소를 준비합니다:
<div id="my-dashboard"></div>
2. DashBuilder.create() 메서드 사용
DashBuilder.create() 메서드는 DashBuilder를 생성하기 위한 정적 메서드로, 다음과 같은 구문으로 사용합니다:
const dashboard = DashBuilder.create({ id, el, info });
id: string - 대시보드 고유 IDel: HTMLElement - 대시보드를 생성할 부모 HTML 컨테이너info: DashboardInfo - 대시보드 생성에 필요한 정보 객체
3. info 파라미터 구조
// DashBuilder.create(el, info) 호출 시 info 파라미터 구조
{
options: {
level: 0, // 사용자 권한
margin: 10, // 위젯 간 여백
cellHeight: 100, // 그리드 셀의 높이
column : 12, // 가로열 최대 허용수
disableDrag : false, // drag 허용 여부
disableResize : false, // 크기 변경 허용 여부
float : false, // grid/float 레이아웃
maxRow : 0, // 최대 높이 제한
minRow : 0, // 최소 높이 제한
locale : "ko" // 언어 설정
theme: "light" // 테마 설정
children: [ // 위젯 목록
{
// 위젯 유형에 따른 특정 설정
id: "widget1", // 위젯 ID
type: "chart", // 위젯 유형 (chart, sheet, map 등)
options: {} // 위젯별 특정 옵션
}
],
},
dataSets: [ // 데이터셋 목록
{
id: "data1", // 데이터셋 ID
name: "데이터셋 이름", // 데이터셋 표시 이름
keyMap: {} // 컬럼 정보 및 메타데이터
data: [{}, {}, ...] // 데이터 항목 배열
}
],
events: { // 이벤트 핸들러 설정 (이벤트는 각 제품에서 제공하는 이벤트만 사용가능)
// IBSheet 관련 이벤트
ibsheet: {
onClick: function(paramObject) {
// 시트 클릭 시 실행될 코드
// paramObject에는 클릭된 셀의 정보가 포함됨
},
// 기타 IBSheet 이벤트...
},
// IBChart 관련 이벤트
ibchart: {
pointClick: function(paramObject) {
// 차트 포인트 클릭 시 실행될 코드
// paramObject에는 클릭된 포인트 정보가 포함됨
},
// 기타 IBChart 이벤트...
},
// IBMap 관련 이벤트
ibmap: {
map: {
onclick: function(paramObject) {
// 맵 클릭 시 실행될 코드
// paramObject에는 클릭된 맵 좌표 정보가 포함됨
},
},
point: {
onclick: function(paramObject) {
// 맵 포인트 클릭 시 실행될 코드
// paramObject에는 클릭된 포인트 정보가 포함됨
},
}
// 기타 IBMap 이벤트...
}
}
}
4. options 객체 상세 설명
options 객체는 대시보드의 기본 레이아웃과 구성을 정의합니다:
level: 대시보드 계층 레벨을 정의합니다. 중첩 대시보드의 경우 사용됩니다.margin: 위젯 간의 여백을 픽셀 단위로 지정합니다.cellHeight: 그리드 셀 높이를 픽셀 단위로 지정합니다.children: 대시보드에 포함될 위젯의 배열입니다.column: 위젯 배치에 사용될 가로열의 최대 허용 수를 설정합니다. (default: 12)disableDrag: 대시보드의 모든 위젯의 드래그를 통한 이동을 막습니다.disableResize: 대시보드의 모든 위젯의 드래그를 통한 크기 변경을 막습니다.float: 위젯 배치를 floating 형식으로 놓을지 여부를 결정합니다.maxRow: 위젯 배치되는 행의 최대 행수를 지정합니다.minRow: 위젯 배치되는 행의 최소 행수를 지정합니다.locale: 사용할 언어(ko, en)를 지정합니다.theme: DashBuilder의 테마(light, dark)를 지정합니다.
5. dataSets 배열 상세 설명
dataSets 배열은 대시보드의 위젯에서 사용할 데이터를 정의합니다:
- 각 데이터셋은 고유 ID와 이름을 가집니다.
data배열은 실제 데이터 항목을 포함합니다.- 각 항목은 ID, 이름, 컬럼 정보 및 메타데이터, 데이터 배열을 가집니다.
6. events 객체 상세 설명
events 객체는 대시보드의 다양한 위젯에 대한 이벤트 핸들러를 정의합니다:
-
ibsheet: IBSheet 위젯에 대한 이벤트 핸들러입니다.onClick: 시트의 셀 클릭 시 호출되는 함수입니다.
-
ibchart: IBChart 위젯에 대한 이벤트 핸들러입니다.pointClick: 차트의 데이터 포인트 클릭 시 호출되는 함수입니다.
-
ibmap: IBMap 위젯에 대한 이벤트 핸들러입니다.map.onclick: 맵 자체 클릭 시 호출되는 함수입니다.point.onclick: 맵 위의 포인트(마커) 클릭 시 호출되는 함수입니다.
각 이벤트 핸들러는 이벤트 관련 정보가 포함된 paramObject를 매개변수로 받습니다.
참고 사항
tip
create()는 정적(static) 메서드로 DashBuilder 클래스에서 직접 호출합니다.- info 파라미터를 통해 대시보드의 옵션, 위젯, 데이터셋, 이벤트 등을 설정할 수 있습니다.
- 대시보드가 생성되면 해당 Dashboard 객체가 반환되어 추가 작업에 사용할 수 있습니다.